<template>
  <div class="demo-block">
    <h4>基础用法</h4>
    <div class="demo-row">
      <my-button type="primary" @click="toast({title:'默认提示'})">默认提示</my-button>
      <my-button type="success" @click="toast({title:'成功提示',type:'success'})">成功提示</my-button>
      <my-button type="warning" @click="toast({title:'警告提示',type:'warning'})">警告提示</my-button>
      <my-button type="danger" @click="toast({title:'危险提示',type:'danger'})">危险提示</my-button>
    </div>
  </div>
</template>

<script>
import button from "../../../../src/components/button";
import toast from "../../../../src/components/toast";
export default {
  components: {
    "my-button": button,
  },
  data() {
    return {
      toast,
    };
  },
};
</script>

<style scoped>
.demo-row {
  margin: -10px;
}
</style>
